<script setup>

import {ref, onMounted, nextTick, watch} from 'vue'
import axios from 'axios'

import OrderDetail from "@/components/OrderDetail.vue";
import { userStore } from '@/store/index.js'
const userItemStore = userStore();

const activeName = ref('0'); // 默认选中第一个标签页

const orderStatus = ref({
  '0': '全部订单', '1': '待付款','2': '待发货', '3': '待收货',
  '4': '待评价', '5': '退款中','6': '售后中', '7': '已取消',
  '8': '已退货', '9': '已收货'
})

const  orders =  ref([]) //要显示的订单列表
//加载指定状态的订单
const loadOrdersByStatus = ()=>{
  axios.get(`/order/loadOrdersByStatus/${userItemStore.user.id}/${activeName.value}`).then(resp => {
    orders.value = resp.data;
  })
}
watch(()=>activeName.value,(newValue)=>{
  activeName.value = newValue;
  loadOrdersByStatus();
})

// const handleClick = (tab)=> {
//   console.log(tab.name);  //就是不同的状态0-9
//   //查询不同的状态
//   loadOrdersByStatus(tab.props.name);
// }
const handleChangeOrderStatus=()=>{
  // 重新加载数据
  loadOrdersByStatus();

}


onMounted(()=>{
  //加载全部订单
  loadOrdersByStatus();
})
</script>

<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--  显示所有订单的状态 -->
        <el-tab-pane :label="value" :name="key"
                     v-for="(value,key) in orderStatus" :key="key">
          <!-- 显示订单明细组件 -->
          <order-detail :orders="orders" :current-status="key" @changeOrderStatus="handleChangeOrderStatus"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>
.order-tabs-container {
  padding: 20px;
}

/* 橙色主题定制 */
:deep(.el-tabs__header) {
  border-bottom: 1px solid #FF7D00;
}

:deep(.el-tabs__nav) {
  border-radius: 4px 4px 0 0;
}

:deep(.el-tabs__item) {
  color: #333;
}

:deep(.el-tabs__item.is-active) {
  color: #FF7D00;
  font-weight: bold;
}

:deep(.el-tabs__active-bar) {
  background-color: #FF7D00;
}

:deep(.el-tabs__item:hover) {
  color: #FF7D00;
}

.tab-content {
  padding: 20px 0;
}
</style>